<template>
	<b-layout-index>
		<navbar  :title="$t('关于我们')"></navbar>
		<view class="about-page">


			<view class="content-container">
				<!-- Logo区域 -->
				<view class="logo-section">
					<image class="company-logo"
						src="https://ai-public.mastergo.com/ai/img_res/9662aa52d029b722a36430074e8c208d.jpg"
						mode="aspectFit" />
					<text class="company-slogan">{{info.name}}</text>
				</view>

				<!-- 公司介绍 -->
				<view class="info-card">
					<text class="card-title">{{$t('公司简介')}}</text>
					<text class="info-text">{{info.remark}}</text>

					<!-- 数据统计 -->
					<!-- <view class="stats-container">
						<view class="stat-item">
							<text class="stat-number">8</text>
							<text class="stat-label">年专业经验</text>
						</view>
						<view class="stat-item">
							<text class="stat-number">500+</text>
							<text class="stat-label">专业人才</text>
						</view>
						<view class="stat-item">
							<text class="stat-number">100+</text>
							<text class="stat-label">合作伙伴</text>
						</view>
					</view> -->
				</view>

				<!-- 企业文化 -->
				<view class="culture-section">
					<text class="section-title">{{$t('企业文化')}}</text>
					<view class="culture-cards">
						<view class="culture-card">
							<!--        <uni-icons type="star" size="24" color="#4080FF"/> -->
							<!--   <text class="culture-title">企业愿景</text> -->
					
								<view class="" v-if="trimHtml(info.content)">
								
									<u-parse :content="info.content" @error="errorText"></u-parse>
								</view>
								<view class="ltr" v-else>
								
									<u-empty mode="data" :text="$t('没有详细')">
									</u-empty>
								</view>
						</view>
						<!--    <view class="culture-card">
            <uni-icons type="heart" size="24" color="#4080FF"/>
            <text class="culture-title">企业使命</text>
            <text class="culture-desc">用科技改变生活，让创新服务人类</text>
          </view>
          <view class="culture-card">
            <uni-icons type="hand-up" size="24" color="#4080FF"/>
            <text class="culture-title">核心价值观</text>
            <text class="culture-desc">诚信、创新、共赢、责任</text>
          </view> -->
					</view>
				</view>

				<!-- 团队展示 -->
				<!--      <view class="team-section">
        <text class="section-title">核心团队</text>
        <scroll-view scroll-x class="team-scroll">
          <view class="team-cards">
            <view class="team-card" v-for="(member, index) in teamMembers" :key="index">
              <image :src="member.avatar" mode="aspectFill" class="member-avatar"/>
              <text class="member-name">{{member.name}}</text>
              <text class="member-title">{{member.title}}</text>
            </view>
          </view>
        </scroll-view>
      </view> -->

				<!-- 联系方式 -->
				<view class="contact-section">
					<text class="section-title">{{$t('联系我们')}}</text>
					<view class="contact-info">
						<view class="contact-item">
							<uni-icons type="location" size="20" color="#666" />
							<text class="contact-text">{{info.address}}</text>
						</view>
						<view class="contact-item">
							<uni-icons type="phone" size="20" color="#666" />
							<text class="contact-text">{{info.phone}}</text>
						</view>
						<view class="contact-item">
							<uni-icons type="email" size="20" color="#666" />
							<text class="contact-text">{{info.email}}</text>
						</view>
					</view>
				</view>

				<!-- 底部区域 -->
				<view class="footer">
					<u-button class="contact-btn" :color="color.primary" type="primary"
						@click="handleContact">{{$t('联系我们')}}</u-button>
					<view class="text-center pd-bottom-10 pd-top-10">
						<text class="copyright">Copyright © 2023 某某科技有限公司</text>
					</view>
				</view>
			</view>

			<!-- 返回顶部 -->
			<view class="back-to-top" v-if="showBackTop" @click="scrollToTop">
				<uni-icons type="top" size="20" color="#fff" />
			</view>
		</view>
	</b-layout-index>
</template>

<script>
	import {
		findByAboutInfo
	} from '../../api/public';

	export default {
		data() {
			return {
				info: {}
			}
		},
		onLoad() {
			console.log("Hello")
			this.fetchData()
		},
		methods: {
			fetchData() {
				//findByAboutInfo
				var the = this;
				findByAboutInfo().then(res => {
					the.info = res;
				})
			},		trimHtml: function(html = "") {
				console.log(html)
				html = html.replace("<p>", "")
				html = html.replace("</p>", "")
				//html = html.replace(/<[^>]*>/g, '')
				console.log(html)
				return html.length > 0;
			},
			errorText: function() {
				console.log("KKKKKKKKKKK")
				return "KK";
			}

		}
	}
</script>

<style>
	page {
		height: 100%;
	}

	.about-page {
		height: 100%;
		background-color: #f5f6f7;
	}

	.header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 88rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		z-index: 100;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
	}

	.back-icon {
		width: 40rpx;
		height: 40rpx;
	}

	.header-title {
		flex: 1;
		text-align: center;
		font-size: 16px;
		font-weight: 500;
		color: #333;
	}

	.content-container {
		height: 100%;


	}

	.logo-section {
		padding: 60rpx 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #fff;
	}

	.company-logo {
		width: 200rpx;
		height: 200rpx;
		margin-bottom: 20rpx;
	}

	.company-slogan {
		font-size: 16px;
		color: #333;
		font-weight: 500;
	}

	.info-card {
		margin: 20rpx;
		padding: 30rpx;
		background-color: #fff;
		border-radius: 12rpx;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	}

	.card-title {
		font-size: 16px;
		font-weight: 500;
		color: #333;
		margin-bottom: 20rpx;
		display: block;
	}

	.info-text {
		font-size: 14px;
		color: #666;
		line-height: 1.6;
		display: block;
	}

	.stats-container {
		display: flex;
		justify-content: space-around;
		margin-top: 40rpx;
	}

	.stat-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.stat-number {
		font-size: 20px;
		color: #4080FF;
		font-weight: bold;
		margin-bottom: 10rpx;
	}

	.stat-label {
		font-size: 12px;
		color: #999;
	}

	.culture-section {
		padding: 30rpx;
		background-color: #fff;
		margin-top: 20rpx;
	}

	.section-title {
		font-size: 16px;
		font-weight: 500;
		color: #333;
		margin-bottom: 30rpx;
		display: block;
	}

	.culture-cards {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.culture-card {
		padding: 30rpx;
		background-color: #f8f9fa;
		border-radius: 12rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.culture-title {
		font-size: 14px;
		font-weight: 500;
		color: #333;
		margin: 20rpx 0 10rpx;
	}

	.culture-desc {
		font-size: 12px;
		color: #666;
		text-align: center;
	}

	.team-section {
		padding: 30rpx;
		background-color: #fff;
		margin-top: 20rpx;
	}

	.team-scroll {
		width: 100%;
	}

	.team-cards {
		display: flex;
		padding: 10rpx 0;
	}

	.team-card {
		margin-right: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 200rpx;
		flex-shrink: 0;
	}

	.member-avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 60rpx;
		margin-bottom: 16rpx;
	}

	.member-name {
		font-size: 14px;
		color: #333;
		margin-bottom: 8rpx;
	}

	.member-title {
		font-size: 12px;
		color: #999;
	}

	.contact-section {
		padding: 30rpx;
		background-color: #fff;
		margin-top: 20rpx;
	}

	.contact-info {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.contact-item {
		display: flex;
		align-items: center;
		gap: 20rpx;
	}

	.contact-text {
		font-size: 14px;
		color: #666;
	}

	.footer {
		padding: 40rpx 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.contact-btn {
		width: 80%;
		margin-bottom: 30rpx;
		background-color: #4080FF;
	}

	.copyright {
		font-size: 12px;
		color: #999;
	}

	.back-to-top {
		position: fixed;
		right: 30rpx;
		bottom: 100rpx;
		width: 80rpx;
		height: 80rpx;
		background-color: #4080FF;
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 2px 8px rgba(64, 128, 255, 0.3);
	}
</style>